<template>
  <div class="content">
    <div class="main" id="mainaashocaaak"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      list: [],
      myChart: undefined,
      timer: null,
      WarningValue: 1.8, //预警值
      arr: [
        1.16064, 1.10316, 1.00077, 0.970006, 1.956386, 0.84518, 0.597536,
        1.02446, 0.594247, 0.925623, 0.715552, 0.750855,
      ],
    };
  },
  methods: {
    createEcharts() {
      var myChart = echarts.init(document.getElementById("mainaashocaaak"));
      var option = {
        // backgroundColor: "rgba(1,202,217,.2)",
        grid: {
          left: 70,
          // right: 20,
          top: 45,
          bottom: 40,
        },

        // legend: {
        //   top: 10,
        //   textStyle: {
        //     fontSize: 10,
        //     color: "rgba(255,255,255,.7)",
        //   },
        //   data: ["沉降", "挠度", "倾斜"],
        // },
        xAxis: [
          {
            type: "category",

            axisLabel: {
              textStyle: {
                color: "#01B4FF",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#0A156E",
                width: 1, //这里是为了突出显示加上的
              },
            },
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            // interval: 50,
            name: "单位(mm)",
            min: function (value) {
              return value.min;
            },
            max: function (value) {
              return value.max;
            },
            nameTextStyle: {
              color: "#2BB6FF",
              fontSize: 12,
            },
            axisLabel: {
              textStyle: {
                color: "#01B4FF",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#0A156E",
                width: 1, //这里是为了突出显示加上的
              },
            },
          },
          {
            type: "value",
            name: "",
            max: 25,
            interval: 5,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0)",
              },
            },
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          {
            name: "倾斜",
            type: "bar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#033BFF" },
                  { offset: 0.5, color: "#0FF" },
                  { offset: 1, color: "#01B1FF" },
                ]),
              },
            },
            markLine: {
              animation: false,
              symbol: "none",
              lineStyle: {
                type: "solid",
                width: 1,
              },
              itemStyle: {
                normal: {
                  color: "#F00",
                  label: {
                    show: true,
                    fontSize: 16,
                    color: "#f00",
                    position: "end",
                    overflow: "none",
                  },
                },
              },

              data: [
                {
                  yAxis: this.WarningValue,
                  silent: true,
                },
              ],
            },
            data: this.list,
          },
        ],
      };
      // 屏幕适配
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      this.timer = setInterval(() => {
        this.list = [];
        this.arr.forEach((item) => {
          if (item > this.WarningValue) {
            this.list.push({
              value: item,
              itemStyle: {
                color: "rgba(232, 13, 66, 0.75)",
              },
            });
          } else {
            this.list.push(item);
          }
        });
        myChart.setOption({
          series: [
            {
              data: this.list,
            },
          ],
        });
        // console.log(this.list, "this.list视觉挠度");
      }, 1000);
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    this.createEcharts();
  },

  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>
<style  scoped>
.content {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.main {
  height: 100%;
  width: 100%;
}
</style>